<template>
  <div class="Water">
    <div>
      <div>
        <p>用户id</p>
        <el-input v-model="from.userId"/>
      </div>
      <div>
        <p>用户邮箱</p>
        <el-input v-model="from.email"/>
      </div>
      <div class="block">
        <p>开始日期</p>  
        <el-date-picker
          v-model="from.FirstOentTime"
          type="date"
          @change="firstChange"
          placeholder="选择日期"
          >
        </el-date-picker>
      </div>
      <div class="block">
        <p>结束日期</p>
        <el-date-picker
          v-model="from.LastOentTime"
          type="date"
          @change="lastChange"
          placeholder="选择日期"
         >
        </el-date-picker>
      </div>
      <div>
        <p>箱子名称</p>
        <el-input v-model="from.boxName"/>
      </div>
      <div>
        <p>类型</p>
        <select v-model="from.type">
          <option>不限</option>
          <option v-for="(item,index) in sell" :key="item+index">{{item.name}}</option>
        </select>
      </div>
      <div>
        <p>分组名称</p>
        <el-input v-model="from.groupName" />
      </div>
    </div>
    <div>
      <div>
        <p>判定结果</p>
        <select v-model="from.result">
          <option>不限</option>
          <option>低价</option>
          <option>高价</option>
        </select>
      </div>
      <div>
        <p>用户类型</p>
        <select v-model="from.isSpecial">
          <option>不限</option>
          <option>普通用户</option>
          <option>特殊用户</option>
        </select>
      </div>
      <div>
        <p>皮肤去向</p>
        <select v-model="from.gowhere">
          <option>不限</option>
          <option>回购</option>
          <option>入库</option>
          <option>取回</option>
        </select>
      </div>
      <div>
        <p>采购平台</p>
        <select v-model="from.purchasingPlatform">
          <option>不限</option>
          <option v-for="(item,index) in sel" :key="item+index">{{item.name}}</option>
        </select>
      </div>
      <div>
        <p>发货类型</p>
        <select @change="hehe" v-model="from.deliverType">
          <option >不限</option>
          <option>手动发货</option>
          <option>自动发货</option>
        </select>
      </div>
      <div class="button">
        <el-button @click="serach">搜索</el-button>
        <el-button @click="exports">导出</el-button>
      </div>
    </div>
    <el-table :data='tableData.list'  border style="width: 100%">
      <el-table-column v-for="(item,index) in list" :key="item+index" :prop="item.key" :label="item.name" width="100"></el-table-column>
    </el-table>
      <el-pagination  @current-change="currentChange"  background layout="prev, pager, next" :total="tableData.pages*10"></el-pagination>
  </div>
</template>
<script>
import axios from '../../../utils/publicApi'
import api from '../../../api/Basicpath/index'
import { Loading } from 'element-ui';

export default {
  data() {
    return {
      name:'不限',
      name1:'不限',
      value1: "",
      value2: "",
      list:[
          {
             name:'开箱ID',
             key:'boxId'
          },
          {
             name:'开箱时间',
             key:'createdAt'
          },
          {
             name:'用户ID',
             key:'userId'
          },
          {
             name:'用户邮箱',
             key:'email'
          },
          {
             name:'用户昵称',
             key:'nickname'
          },
          {
             name:'用户类型',
             key:'isSpecial'
          },
          {
             name:'类型',
             key:'type'
          },{
             name:'开箱金额',
             key:'boxPrice'
          },
          {
             name:'判断结果',
             key:'result'
          },
          {
             name:'皮肤名称',
             key:'itemName'
          },
          {
             name:'皮肤价格',
             key:'itemPrice'
          },
          {
             name:'开箱利润',
             key:'profitOpen'
          },
          {
             name:'回购利润',
             key:'profitCallback'
          },
          {
             name:'采购成本',
             key:'priceRu'
          },
          {
             name:'皮肤去向',
             key:'gowhere'
          },
          {
             name:'采购平台',
             key:'purchasingPlatform'
          },
          {
             name:'发货类型',
             key:'deliverType'
          },
          {
             name:'备注',
             key:'remarkAdmin'
          },
      ],
      tableData:'',
      sel:'',
      sell:'',
      from:{
        userId:null,
        email:null,
        boxName:null,
        type:'不限',
        groupName:null,
        result:'不限',
        FirstOentTime:null,
        LastOentTime:null,
        isSpecial:'不限',
        gowhere:'不限',
        purchasingPlatform:'不限',
        deliverType:'不限',
        pageSize:1,
        currentPage:1
      },
      from1:{
        pageSize:1,
        currentPage:1
      }
    };
  },
 async created(){
    var list =await axios.getAll('/gamemall/openRecord/list',{pageSize:1,currentPage:1})
    var list1 = await axios.postAll('/gamemall/deliveryPlatform/getPlatformList',{state:1})
    var list2 = await  axios.getAll('/gamemall/droplist/type')
    this.tableData = list.obj
    this.sel = list1.data
    this.sell = list2.obj
    this.TypeChange()
 }, 
  methods:{
    currentChange(e){
       var options = false
      Loading.service(options);
        this.from.currentPage = e
        this.from1.currentPage = e
        axios.getAll('/gamemall/openRecord/list',this.from1).then((res)=>{
         if(res.code == 200){
           this.tableData = res.obj
           this.TypeChange()
           let loadingInstance = Loading.service(options);
          this.$nextTick(() => { 
            loadingInstance.close();
          });
         }
      })
    },
    change(){
    },
    hehe(name){
  },
  exports(){
    var obj = JSON.parse(JSON.stringify(this.change()))
    delete obj.currentPage
    delete obj.pageSize
     axios.getAll('/gamemall/openRecord/export',obj).then((res)=>{
          for(var key in obj){
            if(obj[key] == null){
               obj[key] = ''
            }
          }
          var {userId,email,boxName,FirstOentTime,LastOentTime,type,groupName,isSpecial,gowhere,purchasingPlatform,deliverType} = obj
           let url = `${api}/gamemall/openRecord/export?`;
            url+= 'userId='+ userId +'&';
            url+= 'FirstOentTime='+ FirstOentTime==''?null:FirstOentTime +'&';
            url+= 'LastOentTime='+ LastOentTime==''?null:LastOentTime +'&';
            url+= 'email='+ email +'&';
            url+= 'type='+ type +'&';
            url+= 'isSpecial='+ isSpecial +'&';
            url+= 'groupName='+ groupName +'&';
            url+= 'gowhere='+ gowhere +'&';
            url+= 'purchasingPlatform='+ purchasingPlatform +'&';
            url+= 'deliverType='+ deliverType +'&';
           window.open(url,'_blank')
      })
  },
  serach(){
      var options = false
      Loading.service(options);
      this.from1 = JSON.parse(JSON.stringify(this.change()))
      axios.getAll('/gamemall/openRecord/list',this.change()).then((res)=>{
         if(res.code == 200){
           this.tableData = res.obj
           this.TypeChange()
            let loadingInstance = Loading.service(options);
          this.$nextTick(() => { 
            loadingInstance.close();
          });
         }
      })
  },
    firstChange(firstDate){
            this.from.FirstOentTime = this.formatDate(firstDate,'yyyy/MM/dd');
        },
        lastChange(lastDate){
            this.from.LastOentTime = this.formatDate(lastDate,'yyyy/MM/dd');
        },
        formatDate (obj,fmt) {
            var o = {
                "M+": obj.getMonth() + 1,                 
                "d+": obj.getDate(),                    
                "h+": obj.getHours(),                 
                "m+": obj.getMinutes(),                 
                "s+": obj.getSeconds(),                 
                "q+": Math.floor((obj.getMonth() + 3) / 3), 
                "S": obj.getMilliseconds()            
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (obj.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        },
  change(){
    var obj = JSON.parse(JSON.stringify(this.from))
     for(var key in obj){
      if(this.from[key] == '不限'){
        delete obj[key]
      }
    }
      if(obj.result == '低价'){
        obj.result = 0
      }else if(obj.result =="高价"){
        obj.result = 1
      }else{
         obj.result= null
      }
      if(obj.isSpecial == '普通用户'){
        obj.isSpecial = 0
      }else if(obj.isSpecial == '特殊用户'){
        obj.isSpecial =1
      }else{
        obj.isSpecial = null
      }
      if(obj.gowhere =='入库'){
        obj.gowhere = 1
      }else if(obj.gowhere == '回购'){
        obj.gowhere = 2
      }else if(obj.gowhere == '取回'){
        obj.gowhere = 3
      }else{
       obj.gowhere = null
      }
      if(obj.deliverType == '手动发货'){
        obj.deliverType = 1
      }else if(obj.deliverType == '自动发货'){
        obj.deliverType = 0
      }else{
        obj.deliverType =  null
      }
      if(obj.type){
        this.sell.map((item)=>{
          if(obj.type == item.name){
            obj.type = item.id
          }
      })
      }else{
          obj.type  = null
      }
      if(obj.purchasingPlatform){
        this.sel.map((item)=>{
          if(obj.purchasingPlatform == item.name){
              obj.purchasingPlatform = item.id
          }
        })
      }else{
         obj.purchasingPlatform = null
      }
      return obj
  },
    TypeChange(){
       var data = this.tableData.list
       data.map((item)=>{
         if(item.isSpecial == 0){
           item.isSpecial = '普通用户'
         }else if(item.isSpecial == 1){
           item.isSpecial = '特殊用户'
         }else{
           item.isSpecial = ''
         }
         if(item.result== 0){
           item.result = '低价'
         }else if(item.result == 1){
           item.result = '高价'
         }else{
           item.result = ''
         }
         if(item.gowhere == 1){
           item.gowhere = '入库'
         }else if(item.gowhere == 2){
           item.gowhere = '回购'
         }else if(item.gowhere == 3){
           item.gowhere = '取回'
         }else{
           item.gowhere = ''
         }
         if(item.deliverType == 0){
           item.deliverType = '自动发货'
         }else if(item.deliverType == 1){
           item.deliverType = '手动发货'
         }else{
           item.deliverType = ''
         }
         this.sell.map((item1)=>{
           if(item1.id == item.type){
             item.type = item1.name
           }
         })
         this.sel.map((item1)=>{
           if(item1.id == item.purchasingPlatform){
             item.purchasingPlatform = item1.name
           }
         })
       })
     }
 },
  
};
</script>
<style lang="less">
@import "../../../style/mixin.less";
.Water {
  .block{
    .w(200);
    margin: 0 20px;
    .el-input{
      width: 100%!important; 
    }
  }
  
  .demonstration{
    margin-bottom: 20px;
  }
  .el-pagination{
      text-align: center;
  }
  text-align: left;
  .el-input {
    .w(120);
  }
  > div {
    margin: 20px 0;
  }
  > div:nth-of-type(1) > div,
  > div:nth-of-type(2) > div {
    display: inline-block;
    margin: 0px 10px;
    select {
      width: 100px;
    }
    p {
      text-align: center;
      margin-bottom: 20px;
    }
  }
  > div:nth-of-type(2) > div ,> div:nth-of-type(1) > div{
    width: 12%;
    text-align: center;
    select {
      .w(120)
    }
  }
  .button{
    width: 20%!important;
  }
}
</style>